<template>
  <div class="bottom-nav">
    <router-link
      to="/list"
      class="nav-item"
      :class="{ 'active': $route.path === '/list' }"
    >
      <CommentOutlined style="font-size: 25px" />
    </router-link>
    <router-link
      to="/profile"
      class="nav-item"
      :class="{ 'active': $route.path === '/profile' }"
    >
      <UserOutlined style="font-size: 25px"/>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "Footer"
}
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  background: white;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  transition: all 0.2s ease;
}

.nav-item:hover {
  color: #3B82F6;
  transform: translateY(-4px);
}

.nav-item.active {
  color: #3B82F6;
  transform: translateY(-4px);
}
</style>